<template>
  <el-container>
    <el-header height="400px">
      <el-row :gutter="20">
        <el-col :span="6">
          <div>
            <h2>平台实时交易情况</h2>
          </div>
        </el-col>
      </el-row>
<!--      分割线-->
      <el-divider></el-divider>

<!--      平台资金总额部分-->
      <el-row :gutter="20" height="200px">
        <el-col :span="12" :offset="1">
          <el-table
              :data="moneyData"
              style="width: 100%">
            <el-table-column
                prop="actualPay"
                label="平台资金总额"
                width="180">
            </el-table-column>
            <el-table-column
                prop="number"
                label="订单成交数量">
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div>
            <h2>商品成交金额统计</h2>
          </div>
        </el-col>
      </el-row>
      <el-divider></el-divider>
    </el-header>

    <el-container height="300px">
      <el-row :gutter="10">
        <el-col :xs="{span:12}" :sm="{span:12}" :md="{span:12}" :lg="{span:12}" :xl="{span:12}">
          <div>
          <el-aside width="1000px">
          <div>
            <div style="height: 400px;" ref="left">
            </div>
          </div>
          </el-aside>
        </div></el-col>
        <el-col :xs="{span:9,offset:3}" :sm="{span:9,offset:3}" :md="{span:9,offset:3}" :lg="{span:9,offset:3}" :xl="{span:9,offset:3}">
           <div style="margin-left: 120px">
           <div style="height: 400px;" ref="right">
           </div>
           </div>
        </el-col>
      </el-row>
<!--   柱状图部分-->


<!--      饼状图部分-->
<!--      <el-main>-->
<!--        <div>-->
<!--          <div style="height: 400px;" ref="right">-->
<!--          </div>-->
<!--        </div>-->
<!--      </el-main>-->
    </el-container>
  </el-container>
</template>

<script>
export default {
  data(){
    return {
      goodsData: {
        actualPay: [],
        goodName: []
      },
      typeData: [],
      moneyData:[],
      value1:'',
      left:null,
      right:null
    }
  },
  methods:{
    //柱状图部分
    loadEcharts(){
      let left = this.$echarts.init(this.$refs.left);
      let leftOption = {
        xAxis: {
          data: this.goodsData.goodName
        },
        yAxis: {},
        series: [
          {
            type: 'bar',
            data: this.goodsData.actualPay
          }
        ]
      };
      left.setOption(leftOption);

      //饼状图部分
      let right = this.$echarts.init(this.$refs.right);
      let rightOption = {
        series: [
          {
            type: 'pie',
            data: this.typeData,
            radius: '50%'
          }
        ]
      };
      right.setOption(rightOption);

    },
    queryGoods() {
      let jwt = localStorage.getItem("jwt");

      this.$axios.get('api/homePage/queryGood',
          {headers: {"jwt": jwt}})
          .then(res => {
            // console.log("+++++++++++++++++++")
            // console.log(res.data.data)
            if (res.data.code == 200) {
              let xgoodName  = res.data.data;
              xgoodName.forEach(e=>{
                this.goodsData.actualPay.push(e.actualPay);
                this.goodsData.goodName.push(e.goodName);
              });
              if (this.left != null && this.left != '' && this.left != undefined) {
                this.left.dispose(); //销毁
              }
              if (this.right != null && this.right != '' && this.right != undefined) {
                this.right.dispose(); //销毁
              }
              this.loadEcharts();
            //  this.goodsData.actualPay = res.data.data.actualPay;

            }
          })
    },
    queryMoney() {
      let jwt = localStorage.getItem("jwt");
      this.$axios.get('api/homePage/queryMoney',
          {headers: {"jwt": jwt}})
          .then(res => {
            // console.log("++++++++++++++++++++++++");
             console.log(res.data.data);
            if (res.data.code == 200) {
              // console.log("++++++++++++++++++++++++");
              let valueData = {};
              valueData.actualPay=res.data.data.actualPay;
              valueData.number=res.data.data.number;
              this.moneyData.push(valueData);
            }
            console.log("++++++++++++++++++++++++");
            console.log(this.moneyData);
            // console.log(this.moneyData.num);
          })
    },
    queryType() {
      let jwt = localStorage.getItem("jwt");
      this.$axios.get('api/homePage/queryType',
          {headers: {"jwt": jwt}})
          .then(res => {
            // console.log("++++++++++++++++++++++++");
            // console.log(res.data);
            if (res.data.code == 200) {
              let typePart  = res.data.data;
              typePart.forEach(e=>{
                let addValue = {};
                addValue.value=e.actualPay;
                addValue.name=e.typeName;
                this.typeData.push(addValue);
              });
              // console.log("++++++++++++++++++++++++");
              // console.log(this.typeData);
              this.$nextTick(() => {
                this.loadEcharts();
              })
            }
          })
    },
  },
  created() {
    this.queryGoods();
    this.queryMoney();
    this.queryType();
  }
}

</script>

<style scoped>
</style>
